<template>
  <div>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
          </button>
          <router-link to="/" class="navbar-brand">WHUT南湖博物馆</router-link>
         
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
        
          <ul class="nav navbar-nav navbar-right">
              <li><router-link to="/record">预约记录</router-link></li>
              <li v-if="islogin==true"><router-link to="/login"><span class="glyphicon glyphicon-log-in"></span> Login</router-link></li>
              <li v-if="islogin==false"><a href="#" @click="logout"><span class="glyphicon glyphicon-log-out"></span> Exit</a></li>
          </ul>
          </div>
      </div>
    </nav>

    <div class="container-fluid bg-3 text-center">  

      <!-- 查询时间 -->
      <div class="row">
        <div class="col-sm-3 text-left"><h2>预约记录</h2></div>
        
        <div class="col-sm-3">
  
          预约时间
          <el-date-picker
            v-model="time1"
            type="date"
            placeholder="选择开始日期">
          </el-date-picker></div>
        <div class="col-sm-3">
          <el-date-picker
            v-model="time2"
            type="date"
            placeholder="选择结束日期">
          </el-date-picker>
        </div>
        <div class="col-sm-3"><button type="button" class="btn btn-danger" @click="filtertime">查询</button></div>
        
      </div>

      <div class="text-left">
        <img src="../../assets/分割线2.png" alt="" width="10%">
      </div>
      
      <div class="row">
        <div class="col-sm-12">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 预约成功记录 -->
            <el-tab-pane label="预约成功" name="first" >
              <div v-for="item in this.otherItems" :key="item.tid" class="text-left">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <h4>参观时间</h4>
                    <span>{{ item.date }} {{item.period}}</span>
                    <el-divider></el-divider>
                    <p>订单编号 &nbsp;&nbsp;&nbsp; WHUTNANHU{{ item.tid }}</p>
                    <p>预约时间 &nbsp;&nbsp;&nbsp; {{item.vis}}&nbsp;&nbsp;&nbsp;&nbsp;<a data-toggle="collapse" :href="'#'+item.tid">查看详情</a></p>
                    
                  
                  <div :id="item.tid" class="panel-collapse collapse">
          
                    <p>联系手机号 &nbsp;&nbsp;&nbsp; {{item.phone}}</p><br>
                    
                    <h4>观众信息</h4>
                    <div id="detail_info">
                      <div>
                        <span>{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>身份证 &nbsp;&nbsp; {{item.idcard}}</span>
                      </div>
                      <span class="col-sm-4 text-center text-danger">{{item.status}}</span>
                      <button v-if="item.status=='待参观'" class="btn btn-warning col-sm-4"  @click="dialogVisible = true">退票</button>
                    </div>
                    
                  </div>

                  <el-dialog
                      title="确认退票？"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">

                      <div>
                          <!-- 这里的时间应该是动态的 -->
                        <p>您{{item.date}}的票</p>
                      </div>
                      <span slot="footer" class="dialog-footer">
                          <el-button @click="dialogVisible = false">取消</el-button>
                          <el-button type="primary" @click="removeitem(item.tid)">确定</el-button>
                      </span>
                  </el-dialog>

                </div>
                </div>
                
              </div>
            </el-tab-pane>

            <!-- 已退票记录 -->
            <el-tab-pane label="已退票" name="second">
              <div v-for="item in this.filteredItems" :key="item.tid" class="text-left">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <h4>参观时间</h4>
                    <span>{{ item.date }} {{item.period}}</span>
                    <el-divider></el-divider>
                    <p>订单编号 &nbsp;&nbsp;&nbsp; WHUTNANHU{{ item.tid }}</p>
                    <p>预约时间 &nbsp;&nbsp;&nbsp; {{item.vis}}&nbsp;&nbsp;&nbsp;&nbsp;<a data-toggle="collapse" :href="'#'+item.tid">查看详情</a></p>
                    
                  
                  <div :id="item.tid" class="panel-collapse collapse">
          
                    <p>联系手机号 &nbsp;&nbsp;&nbsp; {{item.phone}}</p><br>
                    
                    <h4>观众信息</h4>
                    <div id="detail_info">
                      <span class="col-sm-4">{{ item.name }}</span>
                      <span class="col-sm-4">身份证 &nbsp;&nbsp;&nbsp; {{item.idcard}}</span>
                      <span class="col-sm-4 text-danger">{{item.status}}</span>
                    </div>
                    
                  </div>


                </div>
                </div>
                
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
   
        

    
        
      </div>
    </div>
    
  
</template>

<script>


export default {
  name: 'RecordPage',
  data() {
    return {
      islogin:false,
      time1: '',
      time2: '',
      activeName: 'first',
      dialogVisible: false,
      uid:'',//用户名
      tid:'',//退票的订单号
      selectedrecords: [],
      records: [{
            date: "2024-1-12 ",
            period: "上午 11:00-12:00",
            vis:"2020-12-12 11:00-12:00",
            name: "西施",
            phone: "123456789",
            idcard:"341225xxxx",
            status: "已退票",
            tid: "002", 
        },
        {
            date: "2024-1-15",
            period: "上午 11:00-12:00",
            vis:"2020-12-12 11:00-12:00",
            name: "许豪强",
            phone: "123456789",
            idcard:"341225xxxx",
            status: "已过期",
            tid: "001", 
        },
        {
            date: "2024-1-13",
            period: "上午 11:00-12:00",
            vis:"2020-12-12 11:00-12:00",
            name: "李白",
            phone: "123456789",
            idcard:"341225xxxx",
            status: "已退票",
            tid: "003", 
        },
    ]
    };
  },
  computed: {  
    filteredItems() { // 过滤出已退票的订单 
      return this.records.filter(item => item.status === '已退票');  
    },
    otherItems() {  // 过滤出未退票的订单
      return this.records.filter(item => item.status !== '已退票');  
    }
  },
  components: {

  },
  methods: {
      // 查询指定日期
      filtertime(){
        //每次查询前，重置records

        this.$axios.get('/getitems', { params: { uid: ''}, })
        .then(rsp => {
          this.records = rsp.data.data
          //console.log('请求成功')
          //console.log('开始日期'+this.time1)
        //console.log('结束日期'+this.time2)
        let date1 = new Date(this.time1)
        let date2 = new Date(this.time2)
        if(this.time1==''||this.time2==''){
          alert('请选择日期')
          return
        }
        //直接修改records，这样两个计算属性都会相应变化
        this.records = this.records.filter(item => {
          let dateObj = new Date(item.date);  
          //console.log("测试")
          //console.log(dateObj)
          //console.log(date1)
          //console.log(date2)
          //console.log(dateObj >= date1 && dateObj <= date2)
          return dateObj >= date1 && dateObj <= date2;  
        });
          
          //console.log(rsp.data.data)
        }).catch(err => {
          console.log(err)
          alert('后端服务器未上线')
        })
       
      },


       //登出
       logout(){
            localStorage.removeItem('name')
            localStorage.removeItem('uid')
            localStorage.removeItem('token')
           
            document.cookie='sessionid=;'
           
            this.$router.push('/login')
        },

    handleClick() {
      //console.log(tab, event);
    },
    handleClose(){
            this.dialogVisible = false
           // console.log(done)
        },
    
    //退票
    removeitem(tid){
      this.dialogVisible = false
      //console.log(tid)
      this.$axios.post('/remove', JSON.stringify({ 'tid': tid}))
        .then(rsp => {
            if(rsp.data.code == "200"){
              alert('退票成功')
              this.download()
            }
            else{
              alert('退票失败')
            }
            // console.log('请求成功')
            //console.log(rsp.data.data)
          }).catch(err => {
            console.log(err)
            alert('后端服务器未上线')
          })
     // console.log('退票处理程序结束')
    },
    
    //获取预约信息
    download() {
      //发送get请求
      this.$axios.get('/getitems', { params: { uid: ''}, })
        .then(rsp => {
          this.records = rsp.data.data
          //console.log('请求成功')
          
          //console.log(rsp.data.data)
        }).catch(err => {
          console.log(err)
          alert('后端服务器未上线')
        })
    },
  },
  mounted() {
    this.download()
  }
};

</script>

<style>

</style>